<style lang="less" scoped>
    @import "../../style/A.css";
</style>

<template>
    <div class="A_set">
        <Row>

            <Col span="4">

                <router-link to="testmain">
                    <div class="web-button1">
                        <img
                                src="../../assets/004.png"
                                alt="查看实验题库"
                                width="80"
                                style="margin-top:25px;">
                        <p style="font-size:15px;font-weight:600;margin-top:20px;color:#1296DB;margin-bottom:15px;">
                            查看实验题库</p>
                    </div>
                </router-link>

                <router-link to="Aquestion">
                    <div class="web-button2">
                        <img
                                src="../../assets/001.png"
                                alt="查看竞赛题库"
                                width="80"
                                style="margin-top:25px;">
                        <p style="font-size:15px;font-weight:600;margin-top:20px;color:#19BE6B;margin-bottom:15px;">
                            查看竞赛题库</p>
                    </div>
                </router-link>

                <router-link to="createTest">
                <div class="web-button2">
                    <img
                            src="../../assets/002.png"
                            alt="上传实验题目"
                            width="80"
                            style="margin-top:25px;">
                    <p style="font-size:15px;font-weight:600;margin-top:20px;color:#1296DB;margin-bottom:15px;">
                        创建实验项目</p>
                </div>
                </router-link>

                <router-link to="createQuestion">
                <div class="web-button2">
                    <img
                            src="../../assets/004.png"
                            alt="上传竞赛题目"
                            width="80"
                            style="margin-top:25px;">
                    <p style="font-size:15px;font-weight:600;margin-top:20px;color:#19BE6B;margin-bottom:15px;">
                        上传竞赛题目</p>
                </div>
                </router-link>

            </Col>

            <Col span="20">
                <div style="background-color:#fff;">
                    <div class="web_t"><span style="margin-left:25px;display:block;padding-top:6px;">实验题库总体情况</span>
                    </div>
                    <div style="margin-left:25px;margin-top:20px;">
                        <Row>
                            <Col span="14"
                                 style="width:200px;height:18px;background-color:#52BFF8;display:inline-block;"></Col>
                            <Col span="10"><p
                                    style="margin-top:-5px;margin-left:15px;display:inline-block;position: relative;font-size:14px;font-weight:800;">
                                实验课程数目</p><span style="font-size:14px;font-weight:600;margin-left:6px;">{{overall_situation.course_number}}</span>
                            </Col>
                        </Row>

                        <Row style="margin-top:6px;">
                            <Col span="14"
                                 style="width:300px;height:18px;background-color:#67CDA6;display:inline-block;"></Col>
                            <Col span="10"><p
                                    style="margin-top:-5px;margin-left:15px;display:inline-block;position: relative;font-size:14px;font-weight:800;">
                                实验总数目</p><span style="font-size:14px;font-weight:600;margin-left:6px;">{{overall_situation.section_number}}</span>
                            </Col>
                        </Row>


                        <Row style="margin-top:6px;">
                            <Col span="20"
                                 style="width:400px;height:18px;background-color:#4EC4CC;display:inline-block;"></Col>
                            <Col span="4"><p
                                    style="margin-top:-5px;margin-left:15px;display:inline-block;position: relative;font-size:14px;font-weight:800;">
                                实验总题数</p><span style="font-size:14px;font-weight:600;margin-left:6px;">{{overall_situation.question_course_number}}</span>
                            </Col>
                        </Row>

                        <p style="font-size:14px;font-weight:800;margin-top:10px;">实验概况</p>
                        <div style="width:96%;margin-bottom:20px;margin-top:10px;">
                            <Table border :columns="columns1" :data="overall_situation.specific_information"
                                   size="small"></Table>
                        </div>
                        <br/>
                    </div>
                </div>

                <div style="background-color:#fff;margin-top:30px;margin-bottom:60px;">
                    <div class="web_t"><span style="margin-left:25px;display:block;padding-top:6px;">竞赛题库总体情况</span>
                    </div>
                    <Row>
                        <Col span="10" style="margin-top:10px;">
                            <div id="myChart" :style="{width: '100%', height: '400px',top: '-40px'}"></div>
                        </Col>
                        <Col span="14">
                            <p style="font-size:14px;font-weight:800;margin-top:80px;">题型分布</p>
                            <div style="margin-top:15px;">
                                <div><span style="margin-right:20px;">基础算法</span>
                                    <div style="width:260px;display:inline-block;">
                                        <Progress :percent="basicper" hide-info="false"/>
                                    </div>
                                    <span style="margin-left:30px;">{{basic}}</span><span>/{{totalNumber}}</span></div>
                                <div style="margin-top:10px;"><span style="margin-right:20px;">算法入门</span>
                                    <div style="width:260px;display:inline-block;">
                                        <Progress :percent="middleper" hide-info="false"/>
                                    </div>
                                    <span style="margin-left:30px;">{{middle}}</span><span>/{{totalNumber}}</span></div>
                                <div style="margin-top:10px;"><span style="margin-right:20px;">算法提高</span>
                                    <div style="width:260px;display:inline-block;">
                                        <Progress :percent="difficultper" hide-info="false"/>
                                    </div>
                                    <span style="margin-left:30px;">{{difficult}}</span><span>/{{totalNumber}}</span></div>
                                <div style="margin-top:10px;"><span style="margin-right:20px;">算法挑战</span>
                                    <div style="width:260px;display:inline-block;">
                                        <Progress :percent="chargeper" hide-info="false"/>
                                    </div>
                                    <span style="margin-left:30px;">{{charge}}</span><span>/{{totalNumber}}</span></div>
                            </div>
                        </Col>
                    </Row>


                </div>
            </Col>
        </Row>
    </div>
</template>


<script scoped>
    export default {
        data() {
            return {
                columns1: [
                    {
                        title: '序号',
                        type: "index",
                        width: 70,

                    },
                    {
                        title: '实验名称',
                        key: 'name'
                    },
                    {
                        title: '实验数目',
                        key: 'section_number',
                        width: 100
                    },
                    {
                        title: '实验总题数',
                        key: 'question_number',
                        width: 100
                    },
                    {
                        title: '创建时间',
                        key: 'time',
                        width: 180
                    }
                ],
                overall_situation: {},
                question_number: [{
                    Kind_id: 1,
                    number: 1
                }, {
                    Kind_id: 1,
                    number: 1
                }, {
                    Kind_id: 1,
                    number: 1
                }, {
                    Kind_id: 1,
                    number: 1
                }],
            }

        },
        created() {
            let _this = this;
            this.$store.commit('setATitle', 'adminbank');
            this.ajax.post(_this.postIp+"/get_section_information").then(function (msg) {
                _this.overall_situation = msg.data.data;
            });
            this.ajax.post(_this.postIp+"/question_number").then(function (msg) {
                _this.question_number = msg.data.data;
            })

        },
        computed: {
            totalNumber() {
                return this.question_number[0].number+this.question_number[1].number+this.question_number[2].number+this.question_number[3].number;
            },
            basic(){
                return this.question_number[0].number;
            },
            middle(){
                return this.question_number[1].number;
            },
            difficult(){
                return this.question_number[2].number;
            },
            charge(){
                return this.question_number[3].number;
            },
            basicper(){
                return this.basic/this.totalNumber*100;
            },
            middleper(){
                return this.middle/this.totalNumber*100;
            },
            difficultper(){
                return this.difficult/this.totalNumber*100;
            },
            chargeper(){
                return this.charge/this.totalNumber*100;
            }
        },
        mounted(){
         this.drawLine();
       },
       methods: {
           drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                show: false,
                x: 'top',
                data: ['2', '3','2', '3']
            },
            //color:['#2872ef',,'#fc6e51','#d6d6d6','#fc6e51'],
            series: [{
                name: '提交量',
                type: 'pie',
                radius: ['40%', '50%'],
                data:[
                {value:235, name:'算法基础'},
                {value:274, name:'算法入门'},
                {value:310, name:'算法提高'},
                {value:335, name:'算法挑战'},
                ],
                color:['#2872ef','#fc6e51','#d6d6d6','#fc6e51'],
                // itemStyle: {
                //     normal: {
                //       color: '#5B9BD5'
                //     }
                // },
            }]
        });
    }
       }
    }
</script>
